<template>
  <div class="search">
    <!-- 返回搜索部分 -->
    <div class="header">
      <backTitle></backTitle>
      <van-search
        placeholder="请输入搜索关键词"
        v-model="value"
        shape="round"
        autofocus="true"
        @input="show"
      />
    </div>

    <!-- 热搜榜 -->
    <div class="hots">
      <span class="hots-title">热搜榜</span>
      <template v-for="(item, index) in songhot">
        <router-link :to="{path:'/search/searchdetail',query:{name:item.searchWord}}">
          <div class="hot">
            <span class="number">{{index+1}}、</span>
            <div class="van-ellipsis">
              <span class="keywords">{{item.searchWord}}</span>
              <span class="content">&nbsp;-{{item.content}}</span>
            </div>
          </div>
        </router-link>
      </template>
    </div>

    <!-- 搜索弹出框 -->
    <div class="searchalert" v-if="showalert">
        <template v-for="(item, index) in searchlist">       
        <router-link :to="{path:'/search/searchdetail',
        query:{name:item.name}}"
        >
          <div class="song" v-if="index<10">
            <span class="nav-sousuo">
              <i class="iconfont icon-RectangleCopy"></i>
            </span>
          <div class="van-ellipsis">
            <span class="songname">{{item.name}}</span>
          </div>
        </div>
      </router-link>
      </template>
      </div>
    </div>
  </div>
</template>

<script>
import backTitle from "../../components/back";
import send from "../../navshow";

export default {
  data() {
    return {
      value: "", //输入的值
      songhot: [], //热搜歌曲榜
      showalert: false, //隐藏搜索弹出框
      searchlist: [] //搜索放回的歌曲
    };
  },
  created() {
    // 隐藏导航栏
    send.$emit("tab-show", false);

    // 显示播放器
    this.$store.commit("showplayer", true);

    // 热搜榜
    var url = "http://120.26.184.71:4000/search/hot/detail";
    this.axios.get(url).then(res => {
      this.songhot = res.data.data;
    });
  },
  methods: {
    show() {
      this.showalert = true;
    }
  },
  components: {
    // 注册一个局部组件
    backTitle
  },
  watch: {
    // 监听搜索框值得变化
    value(val) {
      if(val=='') {
        this.showalert=false;
      } else {
        var name = "http://120.26.184.71:4000/search?keywords=" + val;
        this.axios.get(name).then(res => {
          this.searchlist = res.data.result.songs;
        }).catch(err=>{
          console.log(err);
        })
      }
    }
  },
  mounted() {
    // 将排名前三的染红
    setTimeout(() => {
      var list = $(".number");
      for (var i = 0; i < list.length; i++) {
        list[i].index = i;
        if (list[i].index < 3) {
          list[i].style.color = "red";
          list[i].style.fontWeight = 1000;
        }
      }
    }, 50);
  }
};
</script>

<style>
/* 返回搜索部分 */
.search .header {
  display: flex;
  width: 100vw;
  height: 70px;
  align-items: center;
  background-color: #222831;
  color: white;
  position: fixed;
  top: 0;
  z-index: 666;
  border-bottom: 1px lightgray solid;
}

.search .header .back {
  margin-left: 10px;
  margin-right: 15px;
}

.search .header i {
  font-size: 26px;
}

.van-search {
  width: 80vw;
  background: none !important;
  border-top: none !important;
}

/* 热搜榜 */
.hots {
  width: 95vw;
  margin-top: 70px;
  margin-left: 5vw;
  margin-bottom: 65px;
}

.hots-title {
  padding-left: 10px;
  font-size: 20px;
  border-left: 5px red solid;
  font-weight: bold;
}

.hot {
  display: flex;
  align-items: center;
  margin-top: 10px;
}

.hot .number {
  display: block;
  width: 35px;
  font-size: 16px;
  color: gray;
}

.hot .van-ellipsis {
  text-align: left;
}

.hot .keywords {
  font-size: 16px;
  color: #333333;
  font-weight: bold;
}

.hot .content {
  font-size: 12px;
  color: gray;
}

/* 搜索弹出框 */
.searchalert {
  width: 65vw;
  position: fixed;
  z-index: 666;
  left: 18%;
  top: 60px;
  box-shadow: 5px 10px 5px #dbdbdd;
  background-color: white;
}

.searchalert .song {
  height: 40px;
  border-bottom: 1px solid #ddbbbb;
}

.searchalert .song .van-ellipsis span {
  color: gray;
  font-size: 14px;
}

.searchalert .nav-sousuo {
  margin-left: 5px;
  margin-right: 5px;
  margin-top: 6px;
  
}

.searchalert .nav-sousuo i {
  color: gray;
  font-size: 24px !important;
}
</style>